<template>
    <view class="container">
        <view class="container-title">
            <view class="icon">
                <image :src="boy.icon" class="icon" />
            </view>
            <TextAnimation style="padding-bottom: 5rem;">{{ $t('index.title') }}</TextAnimation>
            <view class="icon">
                <image :src="boy.icon" class="icon" />
            </view>
        </view>

        <view class="container-content">
            <scroll-view scroll-y="true" class="scroll-Y container-aside">
                <unicloud-db ref="udb_menu" v-slot:default="{ data }" collection="menu" orderby="created asc"
                    where="delete != true" @load="handleLoadMenu">
                    <view class="menu slide-in-blurred-top" v-for="item in data" :key="item.id"
                        :class="{ 'active': active_menu_id === item.id }" @click="toggleActive(item.id)">{{
                    item.name }}
                    </view>
                </unicloud-db>
            </scroll-view>
            <scroll-view scroll-y="true" class="scroll-Y container-body">

                <uni-swipe-action ref="swipe">
                    <uni-swipe-action-item :right-options="options" @click="actionClick($event, good)"
                        v-for="good in good_list" :key="good.id" :auto-close="false">
                        <view style="width:100%;display: flex;gap:1rem;height:6rem;align-items: center;"
                            class="slide-in-blurred-top">
                            <view>
                                <image style="width: 80px; height: 80px; background-color: #eeeeee;" mode="aspectFill"
                                    :src="good.image" @click="showImage(good.image)"></image>
                            </view>
                            <view class="goods">
                                <text style="font-size:1rem">{{ good.name }}</text>
                                <text class="send">已售 {{ good.sale }}</text>
                                <text class="price">{{ good.price }}</text>
                            </view>
                        </view>
                    </uni-swipe-action-item>
                </uni-swipe-action>
            </scroll-view>

        </view>

        <!-- 添加商品和路由 -->
        <view style="position: fixed;
    width: 100%;bottom:-10px">
            <Control style="bottom:0;width:100%;"></Control>
            <!-- <TabBar></TabBar> -->
        </view>


        <!-- 预览图片 -->
        <view v-if="preview_image.url" class="modal-mask">
            <view class="modal-container">

                <image class="preview-image" mode="aspectFill" :src="preview_image.url">
                    <template>
                        <view class="preview-close" @click="previewClose">
                        </view>
                    </template>
                </image>

            </view>
        </view>
    </view>
</template>

<script>
import TextAnimation from '@/components/TextAnimation.vue';
import Control from '@/components/Control.vue';
import TabBar from '@/components/TabBar.vue';
export default {
    data() {
        return {
            scroll_menu_top: 0,
            scroll_good_top: 0,
            active_menu_id: null,
            boy: {
                icon: '/static/logo.png'
            },
            options: [{
                text: '编辑',
                type: 'edit',
                style: {
                    backgroundColor: '#007aff'
                }
            },
            {
                text: '删除',
                type: 'delete',
                style: {
                    backgroundColor: '#dd524d'
                }
            },
            ],
            menu: [],
            good_list: [],
            preview_image: {
                show: false,
                url: ''
            }
        }
    },
    async onShow() {
        this.$refs.udb_menu && this.$refs.udb_menu.refresh()
        await this.getGoodList()
    },
    methods: {
        handleLoadMenu(e) {
            this.toggleActive(e[0].id)
        },
        async actionClick(e, data) {
            this.$refs['swipe'].closeAll()
            switch (e.content.type) {
                case 'edit':
                    uni.showToast({
                        title: '等待开发',
                        icon: 'none'
                    })
                    break;
                case 'delete':
                    await this.db('good').remove({
                        where: {
                            _id: data._id
                        },
                        toast: "删除商品成功"
                    })
                    await this.getGoodList()
                    break;
            }
        },
        async getGoodList() {
            const {
                data
            } = await this.db('good').get({
                where: {
                    menu_id: this.active_menu_id,
                },
                orderBy: 'created asc'
            })
            const imageFetchTasks = data.map(item => {
                if (item.image) {
                    // 返回一个Promise，用于获取单个item的图片URL
                    return uniCloud.getTempFileURL({
                        fileList: [item.image]
                    })
                        .then(res => res.fileList[0].tempFileURL);
                } else {
                    // 如果没有图片，则直接返回空字符串的Promise
                    return Promise.resolve('');
                }
            });

            // 使用Promise.all等待所有图片URL获取任务完成
            const imageUrls = await Promise.all(imageFetchTasks);

            // 最后，结合原始数据和获取到的URL，创建最终的数据结构
            this.good_list = data.map((item, index) => ({
                ...item,
                image: imageUrls[index]
            }));
        },
        async toggleActive(id) {
            this.active_menu_id = id;
            await this.getGoodList()
            // this.s_good = `delete != true && menu_id == ${this.active_menu_id}`
        },
        showImage(url) {
            this.preview_image.show = true;
            this.preview_image.url = url
        },
        previewClose() {
            this.preview_image.show = false;
            this.preview_image.url = ''
        }
    },
    components: {
        TextAnimation,
        Control,
        TabBar

    }
}
</script>

<style lang="less" scoped>
::v-deep .u-text__value {
    font-size: 1rem !important;
}



.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.container-aside {
    background-color: aquamarine;
    flex: 3;
    overflow: auto;
    padding-right: 1rem;
    padding-bottom: 4rem;

    .menu {
        margin-bottom: .3rem;
        padding: 1.2rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
        /* 动画持续时间及速度曲线 */
        will-change: transform;
        /* 提前告知浏览器该元素将要变换 */
    }

}



.container-body {
    background-color: antiquewhite;
    overflow-y: auto;
    padding: 1rem 1rem 4rem;
    flex: 9;

    .goods {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;

        .img {}

        .send {
            font-size: .8rem;
            color: #827e7a;
        }

        .price {
            color: #df106a;
        }
    }
}

.container-title {
    padding: 0 1.5rem;
    background-color: #ff5c7f;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex:1
}
.container-content {
    display: flex;
    flex: 11;
    height: 0;
}


.icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}


.active {
    /* 使用transform实现滑动效果 */
    transform: translateY(-3px);
    /* 向上滑入，这里的数值可能需要根据实际情况调整 */
    border-left: 3px solid #ff5c7f;
}

/* 如果你想在失去.active类时有动画，可以使用伪类或者确保移除时也有类似的transform变化 */
.menu:not(.active) {
    transform: translateY(0);
    /* 恢复到原始位置，即向下滑出 */
}

.preview-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 91239;
}

.preview-close {
    position: absolute;
    top: -4%;
    right: -2%;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    z-index: 99999;
    padding: 1rem;

    &::after {
        content: 'X';
        position: absolute;
        right: 34%;
        top: 18%;
    }
}

.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-container {
    width: 80vw;
    height: 80vh;
    position: relative;
}

.slide-in-blurred-top {
    -webkit-animation: slide-in-blurred-top .6s cubic-bezier(.23, 1.000, .32, 1.000) both;
    animation: slide-in-blurred-top .6s cubic-bezier(.23, 1.000, .32, 1.000) both
}

/* ----------------------------------------------
 * Generated by Animista on 2024-5-18 22:14:38
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes slide-in-blurred-top {
    0% {
        -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
        transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
        transform: translateY(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}

@keyframes slide-in-blurred-top {
    0% {
        -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
        transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
        transform: translateY(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}
</style>